<template>
	<view class="container">
		<view class="TabBox">
			<view class="TabList">
				<view class="TabItem" @click="checkItem(1)">
					<view class="Title">车辆历史报告-事故型</view>
					<image src="../../static/shigu.png" mode=""></image>
				</view>
				<view class="TabItem" @click="checkItem(0)"
					style="background: linear-gradient( 90deg, #ECEEFC 0%, #DADFFD 100%);">
					<view class="Title">车辆历史报告-维保型</view>
					<image src="../../static/weibao.png" mode=""></image>
				</view>
			</view>
			<view class="ChongNum">
				<view class="NumLeft">
					<view class="shigu">事故型剩余次数: {{acciden ? acciden.length : 0}} </view>
					<view class="weibao">维保型剩余次数: {{maintenance ? maintenance.length : 0}}</view>
				</view>
				<view class="NumRight" @click="RechargeTimes">
					<text class="" style="transform: translate(0,-1rpx);">充值次数</text>
					<uni-icons type="right" size="11" color="#0C72ED"></uni-icons>
				</view>
			</view>
		</view>
		<view class="content" v-if="current == 1">
			<view class="ImageBox">
				<view class="ImageLeft">
					<image src="../../static/carlogo.png" mode=""></image>
				</view>
				<view class="ImageRight">
					<image src="../../static/icon4.png" mode=""></image>
				</view>
			</view>
			<view class="centerBox">
				<view class="centerTitle">车辆历史报告-事故版</view>
				<view class="centerText">合法、权威、全面、实时</view>
				<view class="centerprice">查询价:{{FirstObj.isFirstOrder ? price-FirstObj.firstDiscount : price}}元</view>
				<view class="phototBox">
					<view class="phototHead">
						<view class="PH-left">注意：上传的照片建议不超过5M</view>
						<view class="PH-right" @click="checkTuShow">
							<view class="">拍照规范</view>
							<uni-icons type="right" color="#00A3E6" size="12"></uni-icons>
						</view>
					</view>
					<view class="IMAGE" style="" @click="uploadImg">
						<image v-if="!img" src="../../static/icon5.png" style="height: 352rpx;width: 100%;" mode="">
						</image>
						<image v-else :src="img" style="height: 352rpx;width: 100%;" mode="" @load="HIDEQA"></image>
						<view class="FirstImg" v-if="FirstObj.isFirstOrder">
							<view class="ImgBox">
								<image src="../../static/jian.png" mode=""></image>
								<view class="FirstNum">{{FirstObj.firstDiscount}}</view>
							</view>
						</view>
					</view>
					<view class="VinInput">
						<input type="text" placeholder="此处填写VIN码" v-model="vin" style="text-align: center;" />
					</view>
					<view class="xieyiBox">
						<view class="Yuan" v-if="!show" @click="checkshow"></view>
						<image src="../../static/blurgou.png" @click="checkshow" v-else class="blurGou" mode=""></image>
						<view class="xieyi">
							<text @click="checkshow">我已确认</text>
							<text style="color: #00A3E6;" @click="ServiceAgreement">《用户服务协议》</text>
							<text style="color: #00A3E6;" @click="PowerOfAttorney">《个人信息授权书》</text>
						</view>
					</view>
					<view class="xieyiBox" style="margin-bottom: 30rpx;" @click="checkshowone">
						<view class="Yuan" v-if="!show1"></view>
						<image src="../../static/blurgou.png" v-else class="blurGou" mode=""></image>
						<view class="xieyi">
							<text>我确认</text>
							<text style="color: #00A3E6;">我确认是车主本人或经过车主授权</text>
							<text>使用该服务</text>
						</view>
					</view>
					<view class="BTNBOX">
						<view class="SampleReport" @click="Sample">报告样例</view>
						<view class="Search" @click="QueryAccident">查询</view>
					</view>
				</view>
			</view>
		</view>
		<view class="contentA" v-if="current ==0">
			<view class="ImageBox">
				<view class="ImageLeft">
					<image src="../../static/carlogo.png" mode=""></image>
				</view>
				<view class="ImageRight">
					<image src="../../static/icon6.png" mode=""></image>
				</view>
			</view>
			<view class="centerBox">
				<view class="centerTitle">车辆历史报告-维保版</view>
				<view class="centerprice">查询价: {{ FirstObj.isFirstOrder ? price-FirstObj.firstDiscount : price}}元</view>
				<view class="phototBox">
					<view class="phototHead">
						<view class="PH-left">注意：上传的照片建议不超过5M</view>
						<view class="PH-right" @click="checkTuShow">
							<view class="">拍照规范</view>
							<uni-icons type="right" color="#00A3E6" size="12"></uni-icons>
						</view>
					</view>
					<view class="IMAGE" style="" @click="uploadImg">
						<image v-if="!img" src="../../static/icon5.png" style="height: 352rpx;width: 100%;" mode="">
						</image>
						<image v-else :src="img" style="height: 352rpx;width: 100%;" mode="" @load="HIDEQA"></image>
						<view class="FirstImg" v-if="FirstObj.isFirstOrder">
							<view class="ImgBox">
								<image src="../../static/jian.png" mode=""></image>
								<view class="FirstNum">{{FirstObj.firstDiscount}}</view>
							</view>
						</view>
					</view>
					<view class="VinInput">
						<input type="text" placeholder="此处填写VIN码" v-model="vin" style="text-align: center;" />
					</view>
					<view class="xieyiBox">
						<view class="Yuan" v-if="!show" @click="checkshow"></view>
						<image src="../../static/blurgou.png" @click="checkshow" v-else class="blurGou" mode=""></image>
						<view class="xieyi">
							<text @click="checkshow">我已确认</text>
							<text style="color: #00A3E6;" @click="ServiceAgreement">《用户服务协议》</text>
							<text style="color: #00A3E6;" @click="PowerOfAttorney">《个人信息授权书》</text>
						</view>
					</view>
					<view class="xieyiBox" style="margin-bottom: 30rpx;">
						<view class="Yuan" v-if="!show1" @click="checkshowone"></view>
						<image src="../../static/blurgou.png" @click="checkshowone" v-else class="blurGou" mode="">
						</image>
						<view class="xieyi" @click="checkshowone">
							<text>我确认</text>
							<text style="color: #00A3E6;">我确认是车主本人或经过车主授权</text>
							<text>使用该服务</text>
						</view>
					</view>
					<view class="BTNBOX">
						<view class="SampleReport" @click="maintenancepages">报告样例</view>
						<view class="Search" @click="weibaochax">查询</view>
					</view>
					<view class="TIPS">
						<text>*部分品牌车辆可能存在维保记录不全或生成时间较长，敬请谅解</text>
						<text>*报告查询失败，可以申请退款，联系客服 15196385214</text>
					</view>
				</view>
			</view>
		</view>
		<view class="TITLE">查询记录</view>
		<view class="jiluList">
			<view class="jiluItem" @click="topage('/pages/QueryRecord/QueryRecord')">
				<view class="">查询记录-事故</view>
				<image src="../../static/icon1.png" mode=""></image>
			</view>
			<view class="jiluItem" @click="topage('/pages/MaintenanceOrder/MaintenanceOrder')">
				<view class="">查询记录-维保</view>
				<image src="../../static/icon2.png" mode=""></image>
			</view>
		</view>
		<u-popup :show="tushow" round="16" mode="center">
			<view class="PopupBox">
				<view class="Tu">
					<image src="../../static/errorTu.png" mode=""></image>
				</view>
				<view class="" style="padding: 48rpx 0;">
					<view class="PopBtn" @click="checkTuShow">确定</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show="orderShow" round="16" mode="center">
			<view class="orderBox">
				<view class="orderTitle">加价品牌查询</view>
				<view class="orderTips">维保报告查询价: 28元（标准品牌）</view>
				<view class="orderText">加价品牌（维保报告）</view>
				<view class="orderTable">
					<uni-table border stripe emptyText="暂无更多数据">
						<uni-tr>
							<uni-td align="center">
								<text style="font-weight: 400;font-size: 24rpx;color: #333333;">比亚迪</text>
							</uni-td>
							<uni-td align="center">
								<text>标准品牌查询价</text>
								<text style="color: #FF0000;font-weight: bold;">+10元</text>
							</uni-td>
						</uni-tr>
						<uni-tr>
							<uni-td align="center">
								<text style="font-weight: 400;font-size: 24rpx;color: #333333;">小鹏汽车</text>
							</uni-td>
							<uni-td align="center">
								<text>标准品牌查询价</text>
								<text style="color: #FF0000;font-weight: bold;">+25元</text>
							</uni-td>
						</uni-tr>
						<uni-tr>
							<uni-td align="center">
								<text style="font-weight: 400;font-size: 24rpx;color: #333333;">特斯拉</text>
							</uni-td>
							<uni-td align="center">
								<text>标准品牌查询价</text>
								<text style="color: #FF0000;font-weight: bold;">+53元</text>
							</uni-td>
						</uni-tr>
						<uni-tr>
							<uni-td align="center">
								<text style="font-weight: 400;font-size: 24rpx;color: #333333;">兰博基尼</text>
							</uni-td>
							<uni-td align="center">
								<text>标准品牌查询价</text>
								<text style="color: #FF0000;font-weight: bold;">+91元</text>
							</uni-td>
						</uni-tr>
						<uni-tr>
							<uni-td align="center">
								<text style="font-weight: 400;font-size: 24rpx;color: #333333;">劳斯莱斯</text>
							</uni-td>
							<uni-td align="center">
								<text>标准品牌查询价</text>
								<text style="color: #FF0000;font-weight: bold;">+91元</text>
							</uni-td>
						</uni-tr>
						<uni-tr>
							<uni-td align="center">
								<text style="font-weight: 400;font-size: 24rpx;color: #333333;">宾利</text>
							</uni-td>
							<uni-td align="center">
								<text>标准品牌查询价</text>
								<text style="color: #FF0000;font-weight: bold;">+91元</text>
							</uni-td>
						</uni-tr>
						<uni-tr>
							<uni-td align="center">
								<text style="font-weight: 400;font-size: 24rpx;color: #333333;">阿斯顿.马丁</text>
							</uni-td>
							<uni-td align="center">
								<text>标准品牌查询价</text>
								<text style="color: #FF0000;font-weight: bold;">+91元</text>
							</uni-td>
						</uni-tr>
					</uni-table>
				</view>
				<view class="orderLogo">
					<image src="../../static/qrcode.png" mode="" class="qrcode"></image>
				</view>
				<view class="orderTTT">长按识别二维码 · 添加客服了解明细</view>
				<view class="BTNBOX" @click="onclose">我知道了</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	// import wexinShare  from '@/utils/share.js'
	import {
		AccidentReport,
		ConfigurationQuery,
		ConfirmedOrderTimesConsumed,
		CreateAnOrder,
		FirstSLRFree,
		MaintenanceReport,
		PostVin,
		PublicAccountLogin,
		QueryConfigurationList,
		SampleObtained,
		UnprocessedOrders,
		signature
	} from '../../API/api'
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import {
		getToken,
		setToken
	} from '../../utils/auth';
	import env from '@/utils/env.js'
	export default {
		data() {
			return {
				show: false,
				tushow: false,
				show1: false,
				orderShow: false,
				current: 1,
				acciden: [],
				peiList: null,
				price: null,
				img: '',
				vin: '',
				maintenance: [],
				FirstObj: {},
				baseUrl: env.baseUrl,
				appid: "wxea537745cf273236",
				code: '081KZJFa1F3NRH04gEFa1S6sjV1KZJFu',
				orderSn: null
			}
		},
		async onLoad() {
			// this.getShare()
			// await this.getLogin()
			let token = getToken()
			if (!token) {
				// this.wechatLogin()
			} else {
				await this.ResidualDegree(0)
				await this.ResidualDegree(1)
				await this.peishiItem('maintenance_report_price')
				await this.getFirstOrder()
				this.getShare()
			}
			// await this.GetList()
		},
		async onShow() {
			let token = getToken()
			if (token) {
				await this.ResidualDegree(0)
				await this.ResidualDegree(1)
			}
		},
		computed: {
			...mapState(['orderItem'])
		},
		methods: {
			...mapMutations(['setOrderItem', 'setIMGBOX']),
			WXCONFIG(){
				wx.config({//通过config接口注入权限验证配置
				    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。（测试记得关掉）
				    appId: appId, // 必填，公众号的唯一标识
				    timestamp: timestamp, // 必填，生成签名的时间戳
				    nonceStr: nonceStr, // 必填，生成签名的随机串
				    signature: signature, // 必填，签名，见附录1
				    jsApiList: [
				            'updateAppMessageShareData',
				            'updateTimelineShareData',
							'onMenuShareAppMessage',
							'onMenuShareTimeline'
				        ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
				});
			},
			getShare() {
				signature(window.location.href.split('#')[0]).then(res => {
					console.log(res.data);
					let obj = {
						title: '事故报告查询!',
						desc: '车辆事故报告查询，赶紧跟我一起来使用！',
						link: window.location.href,
						imgUrl: 'https://report.luomausedcar.com/api/profile/upload/2024/08/03/144_20240803150333A001.png'
					}
					this.$wexinShare(res.data, obj)
				}).catch(err => {})
			},
			HIDEQA(e) {
				uni.hideLoading()
			},
			RechargeTimes() {
				uni.navigateTo({
					url: '/pages/ConfirmTheOrder/ConfirmTheOrder'
				})
			},
			onclose() {
				this.orderShow = false
			},
			// onContact(){
			// 	console.log(111);
			// },
			// BtnCancel(){
			// 	this.orderShow = false
			// },
			topage(url) {
				uni.navigateTo({
					url: url
				})
			},
			checkTuShow() {
				this.tushow = !this.tushow
			},
			// 切换类型
			checkItem(value) {
				this.current = value
				this.show = false
				this.show1 = false
				if (value == 0) {
					this.peishiItem('accident_report_price')
				} else if (value == 1) {
					this.peishiItem('maintenance_report_price')
				}
			},
			// 获取Code
			wechatLogin() {
				this.code = this.GetUrlParam('code');
				console.log('this.code', this.code);
				if (!this.code) {
					//第一步获取微信code 1个code只允许使用一次
					// url 是当前链接 encodeURIComponent字符串作为 URI 组件进行编码 来做可识别的回调链接
					// let uri = 'https://qlpcjd.whutyiban.com/%23/pages/ReportCard/ReportCard'
					let uri = 'https://app.report.luomausedcar.com/%23/pages/index/index'
					// let uri = encodeURIComponent(window.location.href);
					window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + this.appid +
						"&redirect_uri=" +
						uri +
						"&response_type=code&scope=snsapi_base&state=state&wechat_redirect&connect_redirect=1#wechat_redirect";
				} else {
					this.getLogin()
				}
			},
			// 截取Code
			GetUrlParam(paraName) {
				//微信回调 回回调当前请求的域名 所以需要从链接后获取参数
				var url = window.location.href;
				console.log('url', url);
				var arrObj = url.split("?");
				console.log(arrObj);
				if (arrObj.length > 1) {
					var arrPara = arrObj[1].split("&");
					var arr;
					for (var i = 0; i < arrPara.length; i++) {
						arr = arrPara[i].split("=");
						if (arr != null && arr[0] == paraName) {
							return arr[1];
						}
					}
					return "";
				} else {
					return "";
				}
			},
			// 配置列表
			GetList() {
				let res = QueryConfigurationList()
				this.peiList = res.rows
			},
			// 配置详情
			async peishiItem(key) {
				let res = await ConfigurationQuery(key)
				this.price = res.data
			},
			// 登录
			async getLogin(code) {
				try {
					let res = await PublicAccountLogin(this.code)
					setToken(res.data.token)
					let userInfo = JSON.stringify(res.data.user)
					uni.setStorageSync('userInfo', userInfo)
				} catch (e) {
					this.wechatLogin()
				}
			},
			// 剩余次数
			async ResidualDegree(typeId) {
				let res = await UnprocessedOrders(typeId)
				if (typeId == 1) {
					this.acciden = res.rows
				} else if (typeId == 0) {
					this.maintenance = res.rows
				}

			},
			//	事故查询
			async QueryAccident() {
				if (this.acciden.length) {
					if (this.show && this.show1) {
						if (this.vin && this.img) {
							let res = await UnprocessedOrders(1)
							let orderSn = res.rows[0].id
							this.orderSn = res.rows[0].id
							this.AccidentInquiry(orderSn)
						} else {
							uni.showToast({
								title: '请上传图片,填写vin码',
								icon: 'none'
							})
						}
					} else {
						uni.showToast({
							title: '请勾选协议',
							icon: 'none'
						})
					}
				} else {
					uni.showModal({
						title: '提示',
						content: '剩余次数不足，请先去充值。',
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/ConfirmTheOrder/ConfirmTheOrder'
								})
							}
						}
					})
				}
			},
			// 维保查询
			async weibaochax() {
				if (this.maintenance.length) {
					if (this.show && this.show1) {
						if (this.vin && this.img) {
							let res = await UnprocessedOrders(0)
							let orderSn = res.rows[0].id
							this.orderSn = res.rows[0].id
							this.maintenanceSearch(orderSn)
						} else {
							uni.showToast({
								title: '请上传图片,填写vin码',
								icon: 'none'
							})
						}
					} else {
						uni.showToast({
							title: '请勾选协议',
							icon: 'none'
						})
					}
				} else {
					uni.showModal({
						title: '提示',
						content: '剩余次数不足，请先去充值。',
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/ConfirmTheOrder/ConfirmTheOrder'
								})
							}
						}
					})
				}
			},
			// 图片上传
			uploadImg() {

				uni.chooseImage({
					count: 1,
					sourceType: ['album', 'camera'],
					success: (res) => {
						uni.showLoading({
							title: "上传中..."
						})
						uni.uploadFile({
							url: this.baseUrl + '/api/common/upload',
							filePath: res.tempFilePaths[0],
							name: 'file',
							header: {
								'Authorization': `Bearer ${getToken()}`
							},
							success: (res) => {
								this.img = JSON.parse(res.data).url
								// uni.hideLoading()
								this.getVin(this.img)
								console.log(this.img);
							},
							fail: () => {
								// uni.hideLoading()
							}
						})
					}
				})
			},
			getVin(url) {
				PostVin({
					url: url
				}).then(res => {
					this.vin = res.data
					console.log(res);
				}).catch(err => {})
			},
			// 事故查询
			AccidentInquiry(orderSn) {
				try {
					let obj = {
						vin: this.vin,
						dpic: this.img
					}
					AccidentReport(orderSn, obj).then(res => {
						uni.navigateTo({
							url: '/pages/QueryRecord/QueryRecord'
						})
					}).catch(err => {
						console.log(err);
						if (err.data.code == 2001) {
							uni.showModal({
								title: '提示',
								content: '此品牌不支持，若需要查询需联系客服',
								confirmText: '联系客服',
								cancelText: '不用了',
								success: (res) => {
									if (res.confirm) {
										this.NumberConsumption()
									}
								}
							})
						} else {
							this.ResidualDegree(1)
						}
					})
				} catch (e) {

				}
			},
			// 维保查询
			maintenanceSearch(orderSn) {
				try {
					let obj = {
						vin: this.vin,
						dpic: this.img
					}
					MaintenanceReport(orderSn, obj).then(res => {
						uni.navigateTo({
							url: '/pages/MaintenancePage/MaintenancePage'
						})
					}).catch(err => {
						console.log(err);
						if (err.data.code == 2001) {
							uni.showModal({
								title: '提示',
								content: '此品牌不支持，若需要查询需联系客服',
								success: (res) => {
									if (res.confirm) {
										this.NumberConsumption()
									}
								}
							})
						} else {
							this.ResidualDegree(0)
						}
					})
				} catch (e) {

				}
			},
			// 消耗次数
			NumberConsumption() {
				ConfirmedOrderTimesConsumed(this.orderSn).then(res => {
					this.orderShow = true
				}).catch(err => {})
			},
			// 用户服务协议
			ServiceAgreement() {
				uni.navigateTo({
					url: '/pages/ServiceAgreement/ServiceAgreement'
				})
			},
			// 个人信息授权书
			PowerOfAttorney() {
				uni.navigateTo({
					url: '/pages/IndividualAuthorization/IndividualAuthorization'
				})
			},
			// 报告样例
			Sample() {
				uni.navigateTo({
					url: '/pages/AccidentPage/AccidentPage'
				})
			},
			// 报告样例-维护版
			maintenancepages() {
				uni.navigateTo({
					url: '/pages/MaintenancePage/MaintenancePage'
				})
			},
			// 是否是首单
			async getFirstOrder() {
				let res = await FirstSLRFree()
				this.FirstObj = res.data
			},
			checkshow() {
				this.show = !this.show
			},
			checkshowone() {
				this.show1 = !this.show1
			}
		}
	}
</script>

<style scoped lang="scss">
	/deep/.table--border {
		border-color: #E8F1FB !important;
	}

	.container {
		min-height: 100vh;
		background-color: #FFF;
		padding: 30rpx 30rpx 60rpx;

		.TabBox {
			border-radius: 24rpx;
			margin-bottom: 30rpx;
			background-color: #FFFFFF;
			box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(192, 214, 251, 0.25);

			.TabList {
				display: flex;
				margin-top: 30rpx;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;

				.TabItem {
					width: 328rpx;
					padding: 24rpx;
					height: 96rpx;
					display: flex;
					position: relative;
					flex-direction: column;
					box-sizing: border-box;
					justify-content: space-between;
					border-radius: 24rpx 24rpx 24rpx 24rpx;
					background: linear-gradient(90deg, #F1F5FC 0%, #BED4FA 100%);

					.Title {
						font-weight: 400;
						font-size: 26rpx;
						color: #000000;
						position: relative;
						z-index: 1;
					}

					.Number {
						font-weight: bold;
						font-size: 22rpx;
						color: #0C72ED;
						position: relative;
						z-index: 1;
					}

					image {
						bottom: 0%;
						right: 20rpx;
						width: 96rpx;
						height: 86rpx;
						display: block;
						position: absolute;
					}
				}
			}

			.ChongNum {
				display: flex;
				align-items: center;
				padding: 28rpx 30rpx;
				justify-content: space-between;

				.NumLeft {
					display: flex;
					align-items: center;

					.shigu {
						color: #0C72ED;
						font-weight: 400;
						font-size: 22rpx;
						margin-right: 30rpx;
					}

					.weibao {
						font-weight: 400;
						font-size: 22rpx;
						color: #5666EF;
					}
				}

				.NumRight {
					display: flex;
					color: #0C72ED;
					font-weight: 400;
					font-size: 22rpx;
					align-items: center;
					padding: 0 26rpx;
					border-radius: 24rpx;
					justify-content: center;
					border: 1rpx solid #0C72ED;
				}
			}
		}

		.content {
			position: relative;
			margin-bottom: 30rpx;
			padding-bottom: 40rpx;
			border-radius: 24rpx;
			background: linear-gradient(180deg, #036DEC 0%, #A0C7F7 63%, #E9F1FD 100%);

			.ImageBox {
				top: 48rpx;
				width: 100%;
				display: flex;
				position: absolute;
				box-sizing: border-box;
				padding: 0 32rpx 0 40rpx;
				justify-content: space-between;

				.ImageLeft {
					margin-top: 98rpx;

					image {
						width: 308rpx;
						height: 60rpx;
						display: block;
					}
				}

				.ImageRight {
					image {
						width: 192rpx;
						height: 218rpx;
						display: block;
					}
				}
			}

			.centerBox {
				padding-top: 50rpx;

				.centerTitle {
					font-weight: bold;
					font-size: 48rpx;
					color: #FFFFFF;
					margin: 0 40rpx 8rpx;
				}

				.centerText {
					font-weight: 400;
					font-size: 26rpx;
					color: #FFFFFF;
					margin: 0 40rpx 12rpx;
				}

				.centerprice {
					font-weight: 400;
					font-size: 28rpx;
					color: #FFFFFF;
					margin: 0 40rpx 12rpx;
				}

				.phototBox {
					padding: 30rpx;
					margin: 0 20rpx;
					position: relative;
					z-index: 2;
					background-color: #FFF;
					border-radius: 24rpx;

					.phototHead {
						display: flex;
						margin-bottom: 30rpx;
						align-items: center;
						justify-content: space-between;

						.PH-left {
							font-weight: 400;
							font-size: 22rpx;
							color: #666666;
						}

						.PH-right {
							display: flex;
							align-items: center;
							font-size: 22rpx;
							color: #00A3E6;
							line-height: 26rpx;
						}
					}

					.IMAGE {
						position: relative;
						height: 352rpx;
						margin-bottom: 30rpx;

						.FirstImg {
							top: 0;
							right: 0;
							width: 164rpx;
							height: 144rpx;
							display: block;
							position: absolute;

							.ImgBox {
								width: 164rpx;
								height: 144rpx;
								position: relative;

								image {
									width: 164rpx;
									height: 144rpx;
									display: block;
								}

								.FirstNum {
									left: 45rpx;
									color: #FFF;
									width: 32rpx;
									height: 32rpx;
									bottom: 35rpx;
									font-weight: 600;
									font-size: 32rpx;
									position: absolute;
									// background-color: #FFF;
									transform: rotate(7.5deg);
								}
							}
						}
					}

					.VinInput {
						padding: 24rpx;
						margin-bottom: 30rpx;
						border-radius: 24rpx;
						box-sizing: border-box;
						border: 1rpx solid #00A3E6;
					}

					.xieyiBox {
						display: flex;
						margin-bottom: 16rpx;
						align-items: center;

						.Yuan {
							width: 28rpx;
							height: 28rpx;
							border-radius: 50%;
							border: 1rpx solid #999;
						}

						.blurGou {
							width: 30rpx;
							height: 30rpx;
							display: block;
						}

						.xieyi {
							font-weight: 400;
							font-size: 22rpx;
							color: #333333;
							margin-left: 8rpx;
						}
					}

					.BTNBOX {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.SampleReport {
							width: 280rpx;
							height: 88rpx;
							font-weight: 400;
							font-size: 32rpx;
							color: #333333;
							text-align: center;
							line-height: 88rpx;
							background-color: #FED525;
							border-radius: 44rpx 44rpx 44rpx 44rpx;
						}

						.Search {
							width: 280rpx;
							height: 88rpx;
							font-weight: 400;
							font-size: 32rpx;
							color: #FFFFFF;
							text-align: center;
							line-height: 88rpx;
							background-color: #00A3E6;
							border-radius: 44rpx 44rpx 44rpx 44rpx;
						}
					}
				}
			}
		}

		.contentA {
			position: relative;
			margin-bottom: 30rpx;
			padding-bottom: 40rpx;
			border-radius: 24rpx;
			background: linear-gradient(180deg, #5464EE 0%, #8F9AF1 63%, #E2E5FF 100%);

			.ImageBox {
				top: 48rpx;
				width: 100%;
				display: flex;
				position: absolute;
				box-sizing: border-box;
				padding: 0 32rpx 0 40rpx;
				justify-content: space-between;

				.ImageLeft {
					margin-top: 98rpx;

					image {
						width: 308rpx;
						height: 60rpx;
						display: block;
					}
				}

				.ImageRight {
					image {
						width: 192rpx;
						height: 192rpx;
						display: block;
					}
				}
			}

			.centerBox {
				padding-top: 50rpx;

				.centerTitle {
					font-weight: bold;
					font-size: 48rpx;
					color: #FFFFFF;
					margin: 0 40rpx 8rpx;
				}

				.centerText {
					font-weight: 400;
					font-size: 26rpx;
					color: #FFFFFF;
					margin: 0 40rpx 12rpx;
				}

				.centerprice {
					font-weight: 400;
					font-size: 28rpx;
					color: #FFFFFF;
					margin: 0 40rpx 40rpx;
				}

				.phototBox {
					padding: 30rpx;
					margin: 0 20rpx;
					position: relative;
					z-index: 2;
					background-color: #FFF;
					border-radius: 24rpx;

					.phototHead {
						display: flex;
						margin-bottom: 30rpx;
						align-items: center;
						justify-content: space-between;

						.PH-left {
							font-weight: 400;
							font-size: 22rpx;
							color: #666666;
						}

						.PH-right {
							display: flex;
							align-items: center;
							font-size: 22rpx;
							color: #00A3E6;
							line-height: 26rpx;
						}
					}

					.IMAGE {
						position: relative;
						height: 352rpx;
						margin-bottom: 30rpx;

						.FirstImg {
							top: 0;
							right: 0;
							width: 164rpx;
							height: 144rpx;
							display: block;
							position: absolute;

							.ImgBox {
								width: 164rpx;
								height: 144rpx;
								position: relative;

								image {
									width: 164rpx;
									height: 144rpx;
									display: block;
								}

								.FirstNum {
									left: 45rpx;
									color: #FFF;
									width: 32rpx;
									height: 32rpx;
									bottom: 35rpx;
									font-weight: 600;
									font-size: 32rpx;
									position: absolute;
									// background-color: #FFF;
									transform: rotate(7.5deg);
								}
							}
						}
					}

					.VinInput {
						padding: 24rpx;
						margin-bottom: 30rpx;
						border-radius: 24rpx;
						box-sizing: border-box;
						border: 1rpx solid #00A3E6;
					}

					.xieyiBox {
						display: flex;
						margin-bottom: 16rpx;
						align-items: center;

						.Yuan {
							width: 28rpx;
							height: 28rpx;
							border-radius: 50%;
							border: 1rpx solid #999;
						}

						.blurGou {
							width: 30rpx;
							height: 30rpx;
							display: block;
						}

						.xieyi {
							font-weight: 400;
							font-size: 22rpx;
							color: #333333;
							margin-left: 8rpx;
						}
					}

					.BTNBOX {
						display: flex;
						align-items: center;
						margin-bottom: 40rpx;
						justify-content: space-between;

						.SampleReport {
							width: 280rpx;
							height: 88rpx;
							font-weight: 400;
							font-size: 32rpx;
							color: #333333;
							text-align: center;
							line-height: 88rpx;
							background-color: #FED525;
							border-radius: 44rpx 44rpx 44rpx 44rpx;
						}

						.Search {
							width: 280rpx;
							height: 88rpx;
							font-weight: 400;
							font-size: 32rpx;
							color: #FFFFFF;
							text-align: center;
							line-height: 88rpx;
							background-color: #00A3E6;
							border-radius: 44rpx 44rpx 44rpx 44rpx;
						}
					}
				}

				.TIPS {
					display: flex;
					color: #333333;
					font-weight: 400;
					font-size: 20rpx;
					line-height: 24rpx;
					flex-direction: column;
				}
			}
		}

		.TITLE {
			font-weight: bold;
			font-size: 32rpx;
			color: #101010;
			margin-bottom: 20rpx;
		}

		.jiluList {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.jiluItem {
				width: 328rpx;
				height: 84rpx;
				display: flex;
				font-weight: 400;
				font-size: 26rpx;
				color: #333333;
				padding: 0 24rpx;
				align-items: center;
				box-sizing: border-box;
				justify-content: space-between;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				background: linear-gradient(90deg, #F1F5FC 0%, #B0E8FF 100%);

				image {
					width: 84rpx;
					height: 84rpx;
					display: block;
				}
			}
		}

		.PopupBox {
			padding-bottom: 30rpx;

			.Tu {
				width: 656rpx;
				height: 656rpx;

				image {
					width: 100%;
					height: 100%;
					display: block;
				}
			}

			.PopBtn {
				width: 414rpx;
				height: 80rpx;
				font-weight: 400;
				font-size: 32rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 80rpx;
				background: #468AF7;
				border-radius: 48rpx;
				margin: 0 auto;
			}
		}

		.orderBox {
			width: 670rpx;
			padding-bottom: 60rpx;
			box-sizing: border-box;

			.orderTitle {
				padding: 30rpx;
				color: #101010;
				font-size: 40rpx;
				font-weight: bold;
				text-align: center;
				margin-bottom: 40rpx;
				box-shadow: 0rpx 2rpx 2rpx 0rpx #EEEEEE;
			}

			.orderTips {
				font-weight: 400;
				font-size: 24rpx;
				color: #333333;
				padding: 0 40rpx;
				margin-bottom: 40rpx;
			}

			.orderText {
				font-weight: 400;
				font-size: 26rpx;
				color: #00A3E6;
				padding: 0 40rpx;
				margin-bottom: 24rpx;
			}

			.orderTable {
				margin: 0 40rpx;
				height: 276rpx;
				overflow-y: auto;
				overflow-x: hidden;
			}

			.orderLogo {
				display: flex;
				margin: 48rpx 0;
				justify-content: center;

				.qrcode {
					width: 252rpx;
					height: 252rpx;
					display: block;
				}
			}

			.orderTTT {
				font-weight: 400;
				font-size: 32rpx;
				color: #707070;
				text-align: center;
				margin-bottom: 48rpx;
			}

			.BTNBOX {
				width: 362rpx;
				height: 84rpx;
				color: #FFFFFF;
				font-weight: 400;
				font-size: 32rpx;
				text-align: center;
				line-height: 84rpx;
				margin: 0 auto;
				background-color: #00A3E6;
				border-radius: 42rpx 42rpx 42rpx 42rpx;
			}
		}
	}
</style>